<!--
 * @FilePath     : /study_code/wangEditor/12-6.html
 * @Description  : toolbarConfig.modalAppendToBody 是否将 `菜单弹出的 modal` `添加到 body 下`。（默认是添加在编辑器内的）
 * @Date         : 2025-04-20 23:11:51
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-20 23:12:03
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/@wangeditor/editor/dist/css/style.css" />
    <link rel="stylesheet" href="/wangEditor/common/style.css" />
  </head>
  <body>
    <div id="editor—wrapper">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>

    <script src="/@wangeditor/editor/dist/index.js"></script>
    <script>
      const { createEditor, createToolbar } = window.wangEditor

      const editorConfig = {
        placeholder: 'Type here...',
      }

      const editor = createEditor({
        selector: '#editor-container',
        html: '<p>hello <strong>world</strong></p>',
      })

      const toolBarConfig = {}
      // ---
      // 获取默认配置
      var toolbarConfig = toolbar.getConfig()

      toolbarConfig.modalAppendToBody = true // 1、配置富文本编辑器弹出 model 是否添加到 body 下；（默认是添加到编辑器内的）

      /*
      2、editor 上监听 'modalOrPanelShow' 弹层或面板显示时触发的事件；
      modalOrPanel 是事件参数；
      */
      editor.on('modalOrPanelShow', modalOrPanel => {
        // modalOrPanel.type !== 'modal' 判断是否是弹层事件
        if (modalOrPanel.type !== 'modal') return
        const { $elem } = modalOrPanel // modal element
        // console.log(1, '什么元素', $elem)
        // $elem 即弹出层元素
        const width = $elem.width()
        const height = $elem.height()
        // 设置 modal 样式（定位、z-index），使其相对居中 —— 显示在全局遮罩中间。
        $elem.css({
          left: '50%',
          top: '50%',
          marginLeft: `-${width / 2}px`,
          marginTop: `-${height / 2}px`,
          zIndex: 1000,
        })
        // 显示蒙层
        document.getElementById('mask').style.display = 'block'
      })

      /*
      3、modalOrPanelHide 弹层或面板隐藏时触发的事件；
      */
      editor.on('modalOrPanelHide', () => {
        // 隐藏蒙层
        document.getElementById('mask').style.display = 'none'
      })
    </script>
  </body>
</html>
